<template>
  <div>
    <v-title :title="title">
      <el-select size="mini" v-model="date" @change="change">
        <el-option :value="90" label="近90天"></el-option>
        <el-option :value="30" label="近30天"></el-option>
        <el-option :value="7" label="近7天"></el-option>
      </el-select>
    </v-title>
    <ve-line
      height="85%"
      :data="c"
      :settings="chartSettings"
      :legend-visible="false">
    </ve-line>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from './title.vue'

  @Component({
    components: {
      vTitle
    }
  })
  export default class Charts extends Vue {
    @Prop() title
    @Prop() value
    @Prop() chartData
    date = this.value
    c = {}



    change (a) {
      this.$emit('input', a)
      this.$emit('refresh')
    }

    init (data) {
      this.c = data
    }

    chartSettings = {
      stack: {'日期': ['我的利润', '渠道商佣金']},
      area: true,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(78, 147, 255, 0.9)' // 0% 处的颜色
          }, {
            offset: 1, color: 'rgba(78, 147, 255, 0.2)' // 100% 处的颜色
          }]
        }
      }
    }
    chartDatas = {
      columns: ['日期', '利润'],
      rows: [
        {'日期': '1/1', '利润': 1393},
        {'日期': '1/2', '利润': 222},
        {'日期': '1/3', '利润': 33},
        {'日期': '1/4', '利润': 2222},
        {'日期': '1/5', '利润': 3312}
      ]
    }
  }
</script>

<style lang="less" scoped>

</style>
